<template>
  <div class="app-container">
    <!-- 监控设备绑定 -->
    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="searchForm" :inline="true">
        <el-form-item label="车牌号" prop="licensePlate">
          <el-select
            v-model="searchForm.licensePlate"
            placeholder="请选择车牌号"
            class="!w-[192px]"
            clearable
            @change="handleSearch"
          >
            <el-option
              v-for="item in plateList"
              :label="item.licensePlate"
              :value="item.licensePlate"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称" prop="deviceName">
          <el-select
            v-model="searchForm.deviceName"
            placeholder="请选择设备名称"
            class="!w-[192px]"
            clearable
            @change="handleSearch"
          >
            <el-option v-for="item in deviceList" :label="item.codeName" :value="item.codeValue" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
          <el-button icon="refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-card shadow="never">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="licensePlate" label="车牌号" />
        <el-table-column prop="deviceId" label="设备ID" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="deviceType" label="设备类型" />
        <el-table-column prop="installPosition" label="安装位置" />
        <el-table-column prop="bindTime" label="绑定时间" />
      </el-table>

      <!-- 分页 -->
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import vehicleMonitoringApi, {
  vehicleMonitoring,
  vehicleMonitoringQuery,
} from "@/api/LogisticsManagement/vehicleMonitoring";
import vehicleMonitoringDataApi from "@/api/LogisticsManagement/vehicleMonitoringData";

//车牌数据
const plateList = ref();

const getPlateList = () => {
  vehicleMonitoringDataApi.getVehicleMonitoring({ pageNum: 1, pageSize: 999 }).then((res: any) => {
    plateList.value = res.list;
  });
};
//设备数据
const deviceList = ref();
//获取设备数据
const getDeviceList = () => {};

const searchForm = ref<vehicleMonitoringQuery>({
  pageNum: 1,
  pageSize: 10,
});
const loading = ref(false);

const total = ref(0);

const tableData = ref<vehicleMonitoring[]>([]);
const handleSearch = () => {
  vehicleMonitoringApi.getVehicleMonitoring(searchForm.value).then((res: any) => {
    tableData.value = res.list;
    total.value = res.total;
  });
};
const handleReset = () => {
  searchForm.value.licensePlate = "";
  searchForm.value.deviceName = "";
  handleSearch();
};

onMounted(() => {
  handleSearch();
  getPlateList();
  getDeviceList();
});
</script>
<style scoped></style>
